<template>
  <div class="topfilter">
    <div>
      <h4>位置区域</h4>
    </div>
    <!-- tabs切换 -->
    <div class="topfilter-tab">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- 数据绑定 -->
        <el-tab-pane :label="v.label" :name="v.name" v-for="v in topfilterlist" :key="v.id">
          <el-button @click="filterHotels('Address', k)" v-for="(k, i) in v.list" :key="i" size="small" type="info" plain>{{ k }}</el-button>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <h4>星级价格</h4>
    </div>
    <div class="topfilter-price">
      <el-button @click="filterHotels('Star', v)" v-for="(v, i) in pricelist" :key="i" size="small" type="info" plain>{{ v }}</el-button>
    </div>
    <div>
      <h4>高级筛选</h4>
    </div>
    <div class="topfilter-filter">
      <el-dropdown v-for="(v, i) in filterlist" :key="i">
        <span class="el-dropdown-link">
          {{ v.title }}
          <el-icon class="el-icon--right">
            <!-- 箭头按钮 -->
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="filterHotels('Facilities', k)" v-for="(k, j) in v.list" :key="j">{{ k }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div>
      <h4>酒店特色主题</h4>
    </div>
    <div class="topfilter-filter">
      <el-dropdown v-for="(v, i) in themeList" :key="i">
        <span class="el-dropdown-link">
          {{ v.title }}
          <el-icon class="el-icon--right">
            <!-- 箭头按钮 -->
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="filterHotels('Theme', k)" v-for="(k, j) in v.list" :key="j">{{ k }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- 酒店列表 -->
    <div class="hotel-list">
      <el-card
          v-for="hotel in paginatedHotels"
          :key="hotel.id"
          class="hotel-card"
          @click="goToHotelOrderMain(hotel.id)"
      >
        <div class="hotel-card-header">
          {{ hotel.hotelName }}
        </div>
        <div class="hotel-card-body">
          <img :src="getRandomImagePath()" alt="Hotel Image" class="hotel-image">
          <p>星级: {{ hotel.hotelStar }}</p>
          <p>设施: {{ hotel.hotelFacilities }}</p>
          <p>主题: {{ hotel.hotelTheme }}</p>
          <p>地址: {{ hotel.hotelAddress }}</p>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="filteredHotels.length"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { listHotels, getHotelsByAddress, getHotelsByStar, getHotelsByFacilities, getHotelsByTheme } from '@/api/hotel.js';
import { useRouter } from 'vue-router';

const router = useRouter();

const activeName = ref('first');
const topfilterlist = ref([
  { id: 1, name: 'first', label: '热门筛选', list: ['天安门广场', '王府井', '上海迪士尼', '东方明珠', '陆家嘴', '豫园', '夫子庙', '南京总统官', '寒山寺'] },
  { id: 2, name: 'second', label: '机场车站', list: ['北京南站', '北京西站', '北京火车站', '上海南站', '北京大兴', '上海虹桥', '青岛胶东', '武汉天河', '广州白云'] },
  { id: 3, name: 'third', label: '商业区', list: ['三里屯', '国贸地区', '西直门', '王府井', '望京', '太阳宫'] },
  { id: 4, name: 'fourth', label: '景点', list: ['什刹海', '前门大街', '五道口', '阿勒泰', '张家界', '黄山', '九寨沟', '颐和园'] }
]);
const pricelist = ref(['五星', '四星', '三星', '两星', '一星']);
const filterlist = ref([
  { title: '早餐', list: ['单份早餐', '多份早餐'] },
  { title: '支付方式', list: ['在线付款', '到店付款', '闪住'] },
  { title: '房型', list: ['双床房', '三床房', '单人床房', '大床房', '特大床房'] },
  { title: '酒店设施', list: ['免费停车', '室内游泳', '酒吧', '按摩'] }
]);
const themeList = ref([
  { title: '酒店特色主题', list: ['情侣主题', '商务主题', '自然风光', '历史文化'] }
]);

const filteredHotels = ref([]);
const currentPage = ref(1);
const pageSize = ref(4);

// 计算当前页的酒店数据
const paginatedHotels = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredHotels.value.slice(start, end);
});

// 图片路径数组
const imagePaths = [
  require('@/assets/images/flight1.png'),
  require('@/assets/images/flight2.png'),
  require('@/assets/images/flight3.png'),
  require('@/assets/images/flight4.png'),
  require('@/assets/images/flight5.png'),
  require('@/assets/images/flight6.png'),
  require('@/assets/images/flight7.png'),
  require('@/assets/images/flight8.png'),
  require('@/assets/images/flight9.png'),
  require('@/assets/images/flight10.png'),
  require('@/assets/images/flight11.png'),
  require('@/assets/images/flight12.png'),
  require('@/assets/images/flight13.png'),
  require('@/assets/images/flight14.png'),
  require('@/assets/images/flight15.png')
];

// 箭头图标
const arrowDown = ArrowDown;

// 随机获取图片路径
const getRandomImagePath = () => {
  const randomIndex = Math.floor(Math.random() * imagePaths.length);
  return imagePaths[randomIndex];
};

const goToHotelOrderMain = (hotelId) => {
  router.push({ path: '/hotelOrder', query: { hotelId } });
};

// 筛选酒店
const filterHotels = async (type, value) => {
  try {
    let hotels = [];
    switch (type) {
      case 'Address':
        hotels = await getHotelsByAddress(value);
        break;
      case 'Star':
        hotels = await getHotelsByStar(value);
        break;
      case 'Facilities':
        hotels = await getHotelsByFacilities(value);
        break;
      case 'Theme':
        hotels = await getHotelsByTheme(value);
        break;
      default:
        break;
    }
    filteredHotels.value = hotels.data; // 更新筛选后的酒店列表
    currentPage.value = 1; // 重置当前页码
  } catch (error) {
    console.error('Error filtering hotels:', error);
  }
};

// 获取所有酒店信息
const fetchAllHotels = async () => {
  try {
    const response = await listHotels();
    filteredHotels.value = response.data; // 假设response.data包含所有酒店信息
  } catch (error) {
    console.error('Error getting all hotels:', error);
  }
};

const handleSizeChange = (size) => {
  pageSize.value = size;
};

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

onMounted(() => {
  fetchAllHotels(); // 组件加载时获取所有酒店信息
});
</script>

<style scoped>
.topfilter {
  margin: 20px;
}

.topfilter-tab {
  margin-bottom: 20px;
}

.topfilter-price {
  margin-bottom: 20px;
}

.topfilter-filter {
  margin-bottom: 20px;
}

.hotel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.hotel-card {
  cursor: pointer;
  width: 300px;
}

.hotel-card-header {
  font-size: 18px;
  font-weight: bold;
}

.hotel-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hotel-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
